import * as THREE from 'three';
import {
    GLTFLoader
} from 'three/addons/loaders/GLTFLoader.js';
import {
    OrbitControls
} from 'three/addons/controls/OrbitControls.js';
import {
    RoomEnvironment
} from 'three/addons/environments/RoomEnvironment.js';

import {
    DRACOLoader
} from 'three/addons/loaders/DRACOLoader.js';

let targetPosition;
const posArr = [
    [35, 4.5871, 35],
    [35, 4.5871, 27],
    [35, 4.5871, 9.2],
    [35, 4.5871, 0.7],

    [10, 4.5875, 0.7],
    [10, 4.5871, 9.2],
    [10, 4.5871, 27],
    [10, 4.5871, 35],

    [14, 4.5871, 35],
    [23, 4.5871, 2],

    [27, 2.1, 5],
    [27, 2.1, 13],
    [27, 2.1, 22],
    [27, 2.1, 31],

    [15, 2.1, 5],
    [15, 2.1, 13],
    [15, 2.1, 22],
    [15, 2.1, 31],

    [10, 4.77, 25],
    [10, 4.77, 10],

    [20, 4.77, 27],
    [20, 4.77, 10],

]
const controlsTargetArr = [
    [90, 4.5871, 35],
    [90, 4.5871, 27],
    [90, 4.5871, 9.2],
    [90, 4.5871, 0.7],

    [-70, 4.5875, 0.7],
    [-70, 4.5871, 9.2],
    [-70, 4.5871, 27],
    [-70, 4.5871, 35],

    [50, 4.5871, 35],
    [50, 4.5871, 0],

    [-86, 2.1, 5],
    [-86, 2.1, 15],
    [-86, 2.1, 20],
    [-86, 2.1, 33],

    [86, 2.1, 5],
    [86, 2.1, 13],
    [86, 2.1, 22],
    [86, 2.1, 31],

    [70, 4.77, 30],
    [70, 4.77, 10],

    [-70, 4.77, 30],
    [-70, 4.77, 10],
]
const scene = new THREE.Scene();
const container = document.getElementById('container');

const selectBox = document.getElementById('selectBox')
const renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

const pmremGenerator = new THREE.PMREMGenerator(renderer);
scene.background = new THREE.Color(0xbfe3dd);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(renderer), 0.04).texture;

const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.set(5, 2, 6);


const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./src/gltf/');



const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(
    './src/model/nsdt_cloud_2024815105744585779.gltf',
    (gltf) => {
        let model = gltf.scene;
        let box = new THREE.Box3().setFromObject(model);
        let center = box.getCenter(new THREE.Vector3()) //获取模型的中心点
        const offset = 60; // 偏移值 
        camera.position.set(center.x + offset, center.y + offset, center.z + offset);

        renderer.render(scene, camera);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.minPolarAngle = 0;
        controls.maxPolarAngle = Math.PI;
        controls.target.copy(center); //设置移动插件的偏移值

        let ifMove = false;
        const speed = 0.05;
        const targetQuaternion = new THREE.Quaternion();
        targetQuaternion.setFromEuler(new THREE.Euler(0, Math.PI / 4, 0));

        container.onclick = function (e) {
            ifMove = false;
            controls.target.copy(center); 
        }

        selectBox.onclick = function (e) {
            e.stopPropagation();
        }
        selectBox.onchange = function (e) {
            if (!selectBox.value) {
                return;
            }
            const pos = posArr[selectBox.value];
            const controlsPos = controlsTargetArr[selectBox.value];
            console.log(selectBox.value)
            ifMove = true;

            controls.target.copy(new THREE.Vector3(controlsPos[0], controlsPos[1], controlsPos[2]));
            targetPosition = new THREE.Vector3(pos[0], pos[1], pos[2]);
            camera.lookAt(targetPosition);
        }


        renderer.render(scene, camera);
        scene.add(model);

        function animate() {
            requestAnimationFrame(animate);
            if (ifMove) {
                camera.position.lerp(targetPosition, speed);
                camera.quaternion.slerp(targetQuaternion, speed);
                if (camera.position.distanceTo(targetPosition) < 0.1) {
                    ifMove = false; // 停止移动
                }
            }

            controls.update();
            renderer.render(scene, camera);
        }

        animate();

    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
        console.error('An error happened', error);
    }
);